@import "../../../../ng-tools/ng-tools-styles";

.navbar {
  padding: 0;
  height: pxToRem(55px);
  box-shadow: 0 0 5px 0;
  background: darken(#fff, 2%) url("../../../../assets/background.svg") pxToRem(-50px) 0;

  .navbar-brand {
    height: inherit;
    text-align: center;
    width: pxToRem(50px);
    line-height: pxToRem(55px);
    img {
      width: pxToRem(20px);
    }
    padding: 0;
    margin-right: 0;
    .fa {
      line-height: pxToRem(55px);
      color: #fff;
    }
  }

  .nav-item {
    display: flex;
    flex: .5;
    cursor: pointer;
  }

  .nav-right {
    position: relative;
    width: pxToRem(400px);
    user-select: none;
    background-color: darken(#fff, 2%);
    justify-content: flex-end;
    height: inherit;
    //不能大于1050, 否则会覆盖bootstrap的modal
    z-index: 1000;
    .server-time {
      position: relative;
      background-color: inherit;
      border: 1px solid darken(#fff, 2%);
      flex: 0 0 50%;
      line-height: pxToRem(55px);
      font-size: 75%;
      font-weight: bold;
      justify-content: center;
    }
    .dd-alert {
      position: relative;
      align-items: center;
      background-color: inherit;
      border: 1px solid darken(#fff, 2%);
      flex: 0 0 25%;
      display: flex;
      justify-content: flex-end;
      .nav-link {
        width: 100%;
        height: 100%;
        flex: 0 0 25%;
        text-align: center;
        background: inherit;
        line-height: 3;
        .badge {
          padding: 0 3px 0 3px;
        }
      }
      .warning-info-container {
        position: absolute;
        z-index: -1;
        width: 300px;
        height: pxToRem(400px);
        top: pxToRem(56px);
        right: pxToRem(-1px);
        overflow-x: hidden;
        overflow-y: hidden;
        border-top-style: none;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        .warning-info-inner-container {
          width: pxToRem(320px);
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          background-color: darken(#fff, 2%);
          .warning-info-content {
            width: pxToRem(300px);
            .warning-info-item {
              border-bottom: 1px solid #ccc;
            }
          }
        }
      }
    }
    .user-menu-group {
      position: relative;
      height: pxToRem(55px);
      background-color: inherit;
      text-align: center;
      font-weight: bold;
      font-size: 75%;
      flex: 0 0 25%;
      border-left: none;
      .user-btn {
        display: block;
        flex: 0 0 100%;
        line-height: pxToRem(55px);
        .fa {
          position: absolute;
          height: 100%;
          line-height: pxToRem(55px);
          right: pxToRem(5px);
          top: 0
        }
      }
      .user-menu {
        position: absolute;
        top: pxToRem(56px);
        width: 100%;
        right: 0;
        overflow: hidden;
        .list-group .list-group-item {
          &:hover {
            color: #eeab5d;
          }
        }
      }
    }
  }
}

.normal {
  display: block;
  margin-top: 0.25rem;
  color: #6c757d !important;
}

.normal-danger {
  display: block;
  margin-top: 0.25rem;
  color: red !important;
}

.navbar-title-a {
  display: block;
  padding: auto
}

.normal {
  display: block;
  margin-top: 0.25rem;
  color: #6c757d !important;
}

.normal-danger {
  display: block;
  margin-top: 0.25rem;
  color: red !important;
}

.text-change {
  color: #22A7F0;
}
